<template>
  <view class="admin-login">
    <view class="login-card">
      <view class="login-header">
        <text class="title">管理员登录</text>
        <text class="subtitle">云打印系统后台管理</text>
      </view>
      
      <view class="login-form">
        <view class="form-group">
          <input 
            class="form-input" 
            v-model="loginForm.username" 
            placeholder="请输入用户名"
            type="text"
          />
        </view>
        
        <view class="form-group">
          <input 
            class="form-input" 
            v-model="loginForm.password" 
            placeholder="请输入密码"
            type="password"
          />
        </view>
        
        <button class="login-btn" @click="handleLogin" :disabled="isLoading">
          {{ isLoading ? '登录中...' : '登录' }}
        </button>
        
        <view class="quick-login">
          <text class="quick-title">快速登录</text>
          <button class="quick-btn" @click="quickAdminLogin">管理员账户</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      isLoading: false
    }
  },
  
  methods: {
    async handleLogin() {
      if (!this.loginForm.username) {
        uni.showToast({ title: '请输入用户名', icon: 'none' })
        return
      }
      
      if (!this.loginForm.password) {
        uni.showToast({ title: '请输入密码', icon: 'none' })
        return
      }
      
      this.isLoading = true
      
      try {
        const res = await uni.request({
          url: 'http://localhost:3000/api/admin/auth/login',
          method: 'POST',
          header: {
            'Content-Type': 'application/json'
          },
          data: {
            username: this.loginForm.username,
            password: this.loginForm.password
          }
        })
        
        if (res.data.success) {
          // 保存token
          uni.setStorageSync('token', res.data.data.token)
          uni.setStorageSync('adminInfo', res.data.data.admin)
          
          uni.showToast({ title: '登录成功' })
          
          // 跳转到管理后台
          setTimeout(() => {
            uni.redirectTo({
              url: '/pages/admin/dashboard'
            })
          }, 1500)
        } else {
          uni.showToast({ 
            title: res.data.message || '登录失败', 
            icon: 'none' 
          })
        }
      } catch (error) {
        console.error('登录失败:', error)
        uni.showToast({ 
          title: '网络错误，请检查后端服务是否启动', 
          icon: 'none',
          duration: 3000
        })
      } finally {
        this.isLoading = false
      }
    },
    
    quickAdminLogin() {
      this.loginForm.username = 'admin'
      this.loginForm.password = 'admin123'
      this.handleLogin()
    }
  }
}
</script>

<style scoped>
.admin-login {
  min-height: 100vh;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.login-card {
  width: 100%;
  max-width: 600rpx;
  background: white;
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 20rpx 40rpx rgba(0,0,0,0.1);
}

.login-header {
  text-align: center;
  margin-bottom: 60rpx;
}

.title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}

.subtitle {
  display: block;
  font-size: 28rpx;
  color: #666;
}

.login-form {
  width: 100%;
}

.form-group {
  margin-bottom: 40rpx;
}

.form-input {
  width: 100%;
  height: 88rpx;
  padding: 0 30rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  font-size: 32rpx;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: #007bff;
}

.login-btn {
  width: 100%;
  height: 88rpx;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
}

.login-btn:disabled {
  background-color: #ccc;
}

.quick-login {
  text-align: center;
  padding-top: 30rpx;
  border-top: 1rpx solid #eee;
}

.quick-title {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 20rpx;
}

.quick-btn {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 16rpx 32rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
}
</style>